<template>
  <div class="about">
    <page-search
      :search-form-config="searchFormConfig"
      @searchBtnClick="handleQueryClick"
      @resetBtnClick="handleResetClick"
    />
    <page-content
      ref="pageContentRef"
      :content-table-config="tableConfig"
      pageName="menu"
      @editBtnClick="handleEditBtnClick"
      @createBtnClick="handleNewBtnClick"
    >
      <template #type="scope">
        <template v-if="scope.row.type === 1">一级路由</template>
        <template v-else-if="scope.row.type === 2">二级路由</template>
        <template v-else>按钮</template>
      </template>
    </page-content>

    <page-modal
      ref="pageModalRef"
      pageName="menu"
      :modal-config="modalConfig"
      :default-info="defaultInfo"
    ></page-modal>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

import PageContent from "@/components/page-content";
import PageSearch from "@/components/page-search";
import pageModal from "@/components/page-modal";

import { searchFormConfig } from "./config/search.config.js";
import { tableConfig } from "./config/table.config.js";
import { modalConfig } from "./config/modal.config.js";

import { usePageSearch } from "@/hooks/use-page-search.js";
import { usePageModal } from "@/hooks/use-page-modal.js";

export default defineComponent({
  name: "about",
  components: { PageContent, PageSearch, pageModal },
  setup() {
    const [pageContentRef, handleQueryClick, handleResetClick] =
      usePageSearch();

    const [pageModalRef, defaultInfo, handleNewBtnClick, handleEditBtnClick] =
      usePageModal();

    return {
      tableConfig,
      searchFormConfig,
      modalConfig,
      pageContentRef,
      handleQueryClick,
      handleResetClick,
      pageModalRef,
      defaultInfo,
      handleNewBtnClick,
      handleEditBtnClick,
    };
  },
});
</script>
